<template>
  <section id="content_right">
    <!-- <div class="carousel">
      <el-carousel :interval="4000"
                   type="card"
                   height="200px">
        <el-carousel-item v-for="item in 3"
                          :key="item">
          <article class="article">
            <h2 class="title">TOP3--博客预览</h2>
            <p class="centent">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam eum atque odio cumque mollitia vero odit consequuntur, reprehenderit ducimus repudiandae perspiciatis non, enim quis sed maiores. Voluptatem eveniet asperiores deleniti.</p>
          </article>
        </el-carousel-item>
      </el-carousel>
    </div> -->
    <Article v-for="(item,i) in article"
             :key="i"
             :item="item"></Article>
  </section>
</template>

<script>
import Article from "../module/article";
export default {
  props: ["article"],
  components: {
    Article,
  },
};
</script>

<style lang="less" scoped>
#content_right {
  width: 100%;
  height: 100%;
  overflow: auto;

  .carousel {
    width: calc(100% - 40px);
    box-sizing: border-box;
    margin: 0 auto 5px;

    .el-carousel__item {
      border: 1px solid #eaecef;
      background-color: #fff;
    }
    .article {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      padding: 0 36px;

      .title {
        width: 100%;
        margin: 24px 0 16px;
        padding: 0 0 7.2px;
        border-bottom: 1px solid #eaecef;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 24px;
      }
      .centent {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        line-height: 1.6;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
      }
    }
  }
}
</style>